<style type="text/css">
    /*替换bootstrap的标题样式*/
    .layui-elem-field legend{
        width: unset;margin-bottom:0;border-bottom:none;
    }

    /*设置列表样式*/
    .kt-setting-option-list{
        width:100%;float:left;
    }
    .kt-setting-option-list li{
        width:100%;float:left;margin-top:15px;
        position: relative;
    }
    .kt-setting-option-list li>div{
        box-sizing: border-box;
        display: block;
        padding:10px;border-bottom:1px solid #eee;
        margin-left:50px;
    }
    .kt-setting-option-list li>img
    {
        width: 30px;height:30px;
        position: absolute;
        left:10px;top:50%;
        margin-top: -15px;
    }
    .kt-setting-option-list li:first-child{
        margin-top:unset;
    }
    .kt-setting-option-list li .left{
        float: left;
    }
    .kt-setting-option-list li .left span{
        float: left;height:35px;line-height: 35px;
    }
    .kt-setting-option-list li .left .iconfont{
        width:35px;height:35px;
        display: flex;justify-content: center;align-items: center;
        cursor: pointer;font-size:20px;color:#FFB800;
    }
    .kt-setting-option-list li .right{
        float: right;
    }
    .kt-setting-option-list li .right .layui-form-switch{
        margin-top:0;
    }
</style>

<style>
    .kt-user-setting
    {
        height: 100%;
        margin:0;
        overflow: auto;
    }
    .kt-user-setting .layui-tab-title{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 1;
    }
    .kt-user-setting .layui-tab-content{
        padding:55px 10px 15px 10px;
    }
    .kt-user-setting .kt-open-button-group{
        text-align: center;
    }

    .layui-collapse.kt-oauth-body img{
        height: 60%;
    }

    /*折叠面板*/
    .layui-collapse.kt-oauth-body .layui-colla-title{
        margin:0;
        display: flex;align-items: center;
        background-color: #f8f8f8;
    }
    .layui-collapse.kt-oauth-body img{
        width:30px;height:30px;
        margin: unset;margin-right:15px;

    }
    .layui-collapse.kt-oauth-body .layui-colla-content{
        padding:15px;
    }
    .layui-collapse.kt-oauth-body .layui-colla-content .kt-oauth{
        text-decoration:none;display: table;
        height: 30px;line-height: 30px;padding:0 15px;
        font-weight: 500;box-sizing: border-box;
        margin-top:10px;float: right;
    }
    .layui-collapse.kt-oauth-body .layui-colla-content .kt-oauth.stop{
        border: 1px solid #FF5722;
        color:#FF5722!important;font-size:13px;
    }
    .layui-collapse.kt-oauth-body .layui-colla-content .kt-oauth.stop:hover{
        background-color: #ff572226;
    }
    .kt-oauth-time{
        position: absolute;right: 15px;font-weight: 500;color:#666;
    }

</style>


<div class="layui-tab layui-tab-brief kt-user-setting" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this"><span class="iconfont icon-jibenxinxi"></span> 资料编辑</li>
        <li><span class="iconfont icon-yinsi"></span> 隐私设置</li>
        <li><span class="iconfont icon-gexing"></span> 个性化</li>
        <li><span class="iconfont icon-disanfangguanli"></span> 第三方授权</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图 <span style="color:#FF5722">*</span></label>
                    <div class="layui-input-block">
                        <div class="layui-upload kt-upload">
                            <div class="kt-upload-show">
                                <img class="kt-headpic-show" onload="KtImgLoad(this)" onerror="KtImgError(this);" src="" />
                                <p id="kt-headpic-text"></p>
                                <span class="iconfont icon-guanbi"></span>
                            </div>
                            <label class="kt-upload-btn">
                                <span>上传图片</span>
                                <input id="file" class="layui-upload-file" type="file" name="file">
                            </label>
                            <div class="kt-clear"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-block">
                        <input type="text" name="nick_name" lay-verify="nick_name" autocomplete="off" placeholder="人在江湖飘，保命用小号！" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="true_name" lay-verify="true_name" autocomplete="off" placeholder="记得你的容貌，却未曾听闻您的大名，别让我的余生留下遗憾！" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性格</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="0" title="谦谦君子，温润如玉">
                        <input type="radio" name="sex" value="1" title="窈窕淑玉，君子好逑">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所属地区</label>
                    <div class="layui-input-block" id="picker">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="bothday" class="layui-input" id="bothday" placeholder="适逢同窗生辰，敢问君诞辰">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="tel" lay-verify="tel" autocomplete="off" placeholder="填写手机号码，Call你哟~ ヽ(￣▽￣)ﾉ" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">微信号</label>
                    <div class="layui-input-block">
                        <input type="text" name="wechat" lay-verify="wechat" autocomplete="off" placeholder="可不可以给我你的微信，可不可以让我了解你的内心" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">一句话证明自己</label>
                    <div class="layui-input-block">
                        <textarea name="autograph" lay-verify="autograph" autocomplete="off" placeholder="需要一句话来证明哦" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">多句话乔装自己</label>
                    <div class="layui-input-block">
                        <textarea name="description" lay-verify="description"  autocomplete="off" placeholder="给别人留下点悬念" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="kt-open-button-group">
                    <button type="submit" class="layui-btn layui-btn-sm">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">清空</button>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="" method="post">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>基本信息设置</legend>
                </fieldset>
                <ul class="kt-setting-option-list">
                    <li>
                        <img src="/html/images/telephone.png" alt="">
                        <div>
                            <div class="left">
                                <span>基本信息</span>
                                <span class="iconfont icon-weibiaoti-" kt-tips="忍术：真·奥义（神罗天征）。<br  />切记，启用该忍术后，其他人无法看到您的基本信息"></span>
                            </div>
                            <div class="right">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="是|否">
                            </div>

                            <div class="kt-clear"></div>
                        </div>
                    </li>

                    <li>
                        <img src="/html/images/heart.png" alt="">
                        <div>
                            <div class="left">
                                <span>关注设置</span>
                                <span class="iconfont icon-weibiaoti-" kt-tips="忍术：真·奥义（别天神）。<br  />切记，启用该忍术后，其他人无法添加您为关注！"></span>
                            </div>
                            <div class="right">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="允许|禁止">
                            </div>

                            <div class="kt-clear"></div>
                        </div>
                    </li>

                    <li>
                        <img src="/html/images/computer.png" alt="">
                        <div>
                            <div class="left">
                                <span>陌生人添加</span>
                                <span class="iconfont icon-weibiaoti-" kt-tips="万花筒写轮眼终极奥义 - 须佐能乎。<br  />切记，启用该忍术后，其他人无法添加您为好友！"></span>
                            </div>
                            <div class="right">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="启用|关闭">
                            </div>

                            <div class="kt-clear"></div>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <div class="layui-tab-item">
            个性化
        </div>
        <div class="layui-tab-item">
            <div class="layui-collapse kt-oauth-body" lay-filter="kt-oauth">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        <img src="/html/images/qq.png" alt="">
                        <span>QQ</span>

                        <span class="kt-oauth-time">授权于：2018年10月21日</span>
                    </h2>
                    <div class="layui-colla-content">
                        内容区域

                        <a class="kt-oauth stop" href="javascript:;">停止授权</a>

                        <div class="kt-clear"></div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        <img src="/html/images/weibo.png" alt="">
                        <span>新浪微博</span>

                        <span class="kt-oauth-time">授权于：2018年10月21日</span>
                    </h2>
                    <div class="layui-colla-content">
                        内容区域

                        <a class="kt-oauth stop" href="javascript:;">停止授权</a>

                        <div class="kt-clear"></div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        <img src="/html/images/github.png" alt="">
                        <span>Github</span>

                        <span class="kt-oauth-time">授权于：2018年10月21日</span>
                    </h2>
                    <div class="layui-colla-content">
                        内容区域

                        <a class="kt-oauth stop" href="javascript:;">停止授权</a>

                        <div class="kt-clear"></div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        <img src="/html/images/gitee.png" alt="">
                        <span>Gitee（码云）</span>

                        <span class="kt-oauth-time">授权于：2018年10月21日</span>
                    </h2>
                    <div class="layui-colla-content">
                        内容区域

                        <a class="kt-oauth stop" href="javascript:;">停止授权</a>

                        <div class="kt-clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    layui.config({
        base: 'js/',
    }).use([
        'jquery',
        'form',
        'upload',
        'element',
        'layer',
        'laydate',
        'picker'
    ],function(){
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var picker = layui.picker;

        form.render(); // radio选项刷新渲染
        element.render('collapse','kt-oauth'); // 折叠面板重新渲染

        $.getScript("js/area.js", function () {
            var p2 = new picker();
            p2.set({
                elem: '#picker',
                data: Areas,
                canSearch: true
            }).render();

        });

        // 日期组件刷新
        laydate.render({
            elem: '#bothday'
            ,theme: '#00c1de'
        });

        //普通图片上传
        $('.kt-upload').each(function () {

            var thisObj = $(this);

            upload.render({
                elem: '#kt-upload'
                ,url: '/index/do_member/headpicedit.html'
                ,data: {'dir_name':'member_head_img/{$userInfo.id}','action':'edit_member_img'}
                ,before: function(obj){
                    var msg = '';
                    console.log(obj);
                    //预读本地文件示例，不支持ie8
                    obj.preview( function(index, file, result){
                        console.log(result);
                        // 检测文件上传大小
                        if(file.size > 1024*200){
                            msg = '缩略图片不得超过200KB哦！';
                            return false;
                        }

                        // 判断验证还否通过
                        if(msg !== undefined){
                            layer.msg(msg);
                            return false;
                        }

                        thisObj.siblings('.kt-upload-show').fadeIn(100, function () {
                            thisObj.siblings('.kt-upload-show').css('transform','scale(1)');
                        });

                        thisObj.siblings('.kt-upload-show').children('.kt-headpic-show').attr('src',result);
                    });

                }
                ,done: function(res){

                    layer.msg(res.msg);

                }
                ,error: function(res){
                    return layer.msg('系统开小差了啦，失敬失敬！');
                }
            });
        });


        // 点击事件
        $(document).on('click','.kt-upload .icon-guanbi',function(){
            $(this).siblings('img').removeAttr('src');
        });

        $(document).on('mouseenter','.kt-setting-option-list .icon-weibiaoti-',function(){
            var thisObj = $(this);
            var tips = thisObj.attr('kt-tips');
            setTingTips = layer.tips(
                tips,
                thisObj,
                {
                    tips: [3, '#FFB800'],
                    time: 0,
                    skin: 'kt-userinfo-tips'
                }
            );
        });
        $(document).on('mouseleave','.kt-setting-option-list .icon-weibiaoti-',function(){
            layer.close(setTingTips);
        });
    });
</script>